<template>
    <!-- 修改资料 -->

    <div>
        <!--  v-if="visible"  @click.self="handleClose" -->
        <!-- 内容主题区域 -->
        <el-form label-width="100px" :model="form" label-position="right" ref="formRef" :rules="formRules" disabled
            class="borderNone">
            <el-card>
                <el-row>
                    <el-col :xs="24" :sm="24" :md="24" :lg="5" :xl="5">
                        <el-form-item label="评审表编号" prop="number">
                            <el-input v-model="form.number"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="9" :xl="9">
                        <el-form-item label="发行日期" prop="releaseDate">
                            <el-row :gutter="10">
                                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                                    <el-input v-model="form.releaseDate" />
                                </el-col>
                                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                                    <el-input v-model="form.releaseHour" />
                                </el-col>
                            </el-row>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="5" :xl="5">
                        <el-form-item label="完成期限" prop="completeDays">
                            <el-input v-model="form.completeDays" type="number">个工作日</el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="5" :xl="5">
                        <el-form-item label="版本号" prop="sampleVersion">
                            <el-input v-model="form.sampleVersion"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>
            <el-card style="margin-top: 20px;">
                <el-tabs v-model="activeName">
                    <el-tab-pane label="营业部确认" name="first">
                        <el-skeleton v-if="!request" :rows="15" />
                        <busieOffice v-else v-model="form" :configData="configData" disabled></busieOffice>
                    </el-tab-pane>
                    <el-tab-pane label="选材依据" name="second">
                        <selection v-if="request" v-model:formData="form" v-model:indexData="dataList"
                            :configData="configData" :tempList="tempList" disabled>
                        </selection>
                    </el-tab-pane>
                    <el-tab-pane label="样品附件" name="third">
                        <tsFormTable v-model="dtlList" disabled>
                            <template #tableContent>
                                <el-table-column prop="fileName" label="文件名"></el-table-column>
                                <el-table-column  label="图片" width="100">
                                    <template #default="scope">
                                        <el-image v-if="checkType(scope.row) == 'image'" alt="上传图片"
                                            :src="scope.row.fileFullPath"
                                            @click="openDialog(scope.row.fileFullPath)"></el-image>
                                        <video v-else-if="checkType(scope.row) == 'video'" :src="scope.row.fileFullPath"
                                            controls style="width: 100%;height: 100%;"></video>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="fileKindName" label="类别">
                                </el-table-column>
                                <el-table-column prop="itemIndex" label="排序">
                                </el-table-column>
                                <el-table-column prop="remark" label="备注">
                                </el-table-column>
                            </template>
                        </tsFormTable>
                    </el-tab-pane>

                    <el-tab-pane label="技术部确认" name="fourth">
                        <tdConfirm v-if="request" v-model="form" :configData="configData" disabled></tdConfirm>
                    </el-tab-pane>
                    <el-tab-pane label="生产部确认" name="fifth">
                        <pdConfirm v-if="request" v-model="form" :configData="configData" disabled></pdConfirm>
                    </el-tab-pane>
                    <el-tab-pane label="品质部确认" name="sixth">
                        <qcConfirm v-if="request" v-model="form" :configData="configData" disabled></qcConfirm>
                    </el-tab-pane>
                    <el-tab-pane label="其他版本信息" name="seventh">
                        <version v-if="request" :otherVersionList =otherVersionList></version>
                    </el-tab-pane>
                </el-tabs>
            </el-card>
            <el-card style="margin-top: 10px; margin-bottom: 10px;">
                <el-row>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="尺寸判定" prop="sizeCheck">
                            <el-radio-group v-model="form.sizeCheck" style="margin-top: -4px;">
                                <template v-for="(item, index) in configData.judgeList" :key="index">
                                    <el-radio :label="item.value" size="large">{{ item.label }}</el-radio>
                                </template>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="功能判定" prop="functionCheck">
                            <el-radio-group v-model="form.functionCheck" style="margin-top: -4px;">
                                <template v-for="(item, index) in configData.judgeList" :key="index">
                                    <el-radio :label="item.value" size="large">{{ item.label }}</el-radio>
                                </template>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="评审完成时间" prop="auditCompletdDate">
                            <el-input v-model="form.auditCompletdDate"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="备注">
                    <el-input style="width: 700px;" v-model="form.remark" :autosize="{ minRows: 2 }" type="textarea" />
                </el-form-item>
            </el-card>
        </el-form>


        <div class="button-position">
            <el-button @click="updateVisible">取 消</el-button>
        </div>


        <el-dialog v-model="dialogVisible">
            <img :src="dialogImageUrl" alt="Preview Image" w-full style="width: 100%;" />
        </el-dialog>
    </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';
import Api from '@/api/model/sample'
import busieOffice from './commpoent/busieOffice.vue';
import selection from './commpoent/selection.vue';
import tdConfirm from './commpoent/tdConfirm.vue';
import pdConfirm from './commpoent/pdConfirm.vue';
import qcConfirm from './commpoent/qcConfirm.vue';
import version from './commpoent/version.vue'
import tsFormTable from '@/components/scFormTable/index.vue'
import { checkType } from '@/utils/checkType.js'
const emit = defineEmits(['updatetable'])
const props = defineProps({
    paramsData: {
        type: Object,
        defalut: {}
    }
})

const activeName = ref('first')
// 添加用户数据的对象
const form = ref({})
const request = ref(false)
const configData = ref([])
const dataList = ref([])
const tempList = ref([])
const dtlList = ref([])
const otherVersionList = ref([])
const formRef = ref()

const dialogImageUrl = ref()
const dialogVisible = ref(false)
const formRules = reactive({
    number: [
        { required: true, message: "请输入编号", trigger: "blur" },
    ],
    name: [
        { required: true, message: "请输入名称", trigger: "blur" },
    ]
})

onMounted(() => {
    getInit()
})
const getInit = async () => {
    let res = await Api.audittable.detail.post(props.paramsData)
    if (res.code == '200') {
        configData.value = res.configData
        form.value = res.data
        tempList.value = res.dataList
        dataList.value = JSON.parse(JSON.stringify(res.dataList))
        dtlList.value = res.dtlList
        otherVersionList.value = res.otherVersionList
        request.value = true
    }

}

const openDialog = (val) => {
    dialogImageUrl.value = val
    dialogVisible.value = true
}
const updateVisible = (val) => {
    emit('updatetable')
}



</script>
<style lang="less" scoped>
:deep(.el-card__body) {
    padding-top: 5px;
    padding-bottom: 0px;
}

.borderNone {
    :deep(.el-input__wrapper) {
        box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
        cursor: default;
        background-color: transparent; //背景颜色透明
        border-bottom: 1px solid #999;
        border-radius: 0;

        .el-input__inner {
            cursor: default !important;
        }
    }
    :deep(.el-textarea__inner) {
            box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
            cursor: default;
            background-color: transparent; //背景颜色透明
            border-bottom: 1px solid #999;
            border-radius: 0;
        }
}
</style>



